import React from 'react'
import { Form,Select } from 'antd'
import { formLayout } from '@/utils/utils'


const AddForm = props => {
  const { form, addFormParam, handleSelct, merchants, stores, cameraList, selectMerchant, handleMacAdress } = props
  const { getFieldDecorator } = form
  return (
    <Form layout={formLayout}>
      <Form.Item required label="所属商户" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('supplierId', {initialValue: addFormParam.supplierId,})(
          <Select onChange={selectMerchant}>
            {merchants && merchants.map((r, index) => <Select.Option key={index} value={r.id}>{r.merchantName}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
      <Form.Item required label="选择门店" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('storeId', {initialValue: addFormParam.storeId,})(
          <Select>
            {stores && stores.map(m => <Select.Option key={m.id} value={m.id}>{m.name}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
      <Form.Item required label="MAC数据" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('macAddress', {initialValue: addFormParam.macAddress,})(
          <Select onChange={val => handleMacAdress(val)}  onSelect={(macAddress, deviceName) => handleSelct(macAddress, deviceName)}>
            {cameraList && cameraList.map((r, index) => <Select.Option key={index} value={r.macAddress}>{r.deviceName}</Select.Option>)}
          </Select>,
        )}
      </Form.Item>
    </Form>
  )
}

export default Form.create({})(AddForm)
